<template>
  <div class="new-list">
    <h2>新碟上架</h2>
    <div class="text-list">
      <span
        v-for="(item, index) in textList"
        :key="index"
        @click="getContent({ id: item.id, k: index, v: item.area })"
        :class="textListIndex == index ? 'active' : ''"
        >{{ item.name }}</span
      >
    </div>

    <div class="hotlist-content">
      <div
        class="content-list"
        v-for="(item, index) in contentList"
        :key="index"
        @click="sendAudio(item.id)"
      >
        <img :src="item.picUrl + '?param=180y180'" />
        <span>
          {{ item.name }}
        </span>
      </div>
    </div>
  </div>
</template>

<script>
import { newsong } from "@/api/api";
export default {
  name: "newlist",
  data() {
    return {
      textList: [
        { name: "全部", area: "ALL" },
        { name: "华语", area: "ZH" },
        { name: "欧美", area: "EA" },
        { name: "韩国", area: "KR" },
        { name: "日本", area: "JP" },
      ],
      contentList: [],
      textListIndex: 0,
      listInfo: { limit: 10, offset: 0, area: "ALL" },
      playStyle: false,
    };
  },
  mounted() {
    this.getList(this.listInfo);
  },
  methods: {
    getList(params) {
      newsong(params).then((res) => {
        this.contentList = res.data.monthData.splice(0, 10);
      });
    },
    getContent(params) {
      this.textListIndex = params.k;
      this.listInfo.area = params.v;
      this.getList(this.listInfo);
    },
    sendAudio(params) {
      console.log(params);
      this.$router.push({path:'/albumdetails',params})
      this.send(params);
    },
  },
};
</script>

<style  lang='less' scoped>
.new-list {
  width: 1200px;
  margin-top: 60px;
  h2 {
    font-family: "hmB";
    font-size: 28px;
    color: rgb(68, 68, 68);
    text-align: center;
    margin-bottom: 20px;
  }
  .text-list {
    width: 300px;
    display: flex;
    margin: 0 auto 20px auto;
    justify-content: space-between;
    span {
      display: inline-block;
      text-align: center;
      font-family: "hmR";
      font-size: 16px;
      color: #6b6b6b;
      cursor: pointer;
    }
    .active {
      border-bottom: 3px solid rgb(61, 116, 240);
    }
  }
  .hotlist-content {
    width: 1200px;
    height: 400px;
    margin: 0 auto;
    display: flex;
    align-content: space-between;
    flex-wrap: wrap;
    :nth-child(2n) {
      margin: 0 75px 0 75px;
    }
    :nth-child(6) {
      margin: 0;
    }
    :nth-child(7) {
      margin: 0 75px 0 75px;
    }
    :nth-child(8) {
      margin: 0 ;
    }
    :nth-child(9) {
      margin: 0 75px 0 75px;
    }
    :nth-child(10) {
      margin: 0 ;
    }
    .content-list {
      width: 180px;
      cursor: pointer;
      img {
        width: 180px;
        height: 180px;
        transition: all 0.2s linear;
        border-radius: 5px;
        overflow: hidden;
        position: relative;
      }
      img:hover {
        transform: scale(1.05, 1.05);
        transition: all 0.2s linear;
      }
      span {
        margin: 5px 0 0 0 ;
        font-size: 14px;
        height: 30px;
        font-family: "hmR";
        color: #6b6b6b;
        word-break: break-all;
        word-wrap: break-word;
        overflow: hidden;
        line-height: 30px;
        text-overflow: ellipsis;
        display: -webkit-box;
        /*重新定义-webkit私有盒模型*/
        -webkit-box-orient: vertical;
        /*内容之间的排列顺序，vertical垂直方向排列*/
        -webkit-line-clamp: 1;
        /*在第几行末尾显示省略号...*/
        word-break: break-all;
        cursor: pointer;
      }
    }
  }
}
</style>